<template>
  <el-card class="box-card">
    <el-form label-width="80px">
      <el-form-item label="SPU名称">
        <el-input :value="spuInfo.spuName" disabled />
      </el-form-item>
      <el-form-item label="SKU名称">
        <el-input placeholder="SKU名称" v-model="skuItem.skuName" />
      </el-form-item>
      <el-form-item label="价格">
        <el-input placeholder="价格" v-model="skuItem.price" />
      </el-form-item>
      <el-form-item label="重量">
        <el-input placeholder="重量" v-model="skuItem.weight" />
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input placeholder="规格描述" type="textarea" v-model="skuItem.skuDesc" />
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form label-width="100px">
          <el-form-item :label="skuAttr.attrName" v-for="skuAttr in skuAttrList" :key="skuAttr.id">
            <el-select v-model="skuAttr.skuIdAttrId" :placeholder="`请选择${skuAttr.attrName}`">
              <el-option
                v-for="attr in skuAttr.attrValueList"
                :key="attr.id"
                :label="attr.valueName"
                :value="`${skuAttr.id}:${attr.id}`"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form inline label-width="80px">
          <el-form-item
            :label="spuAttr.saleAttrName"
            v-for="spuAttr in spuInfo.spuSaleAttrList"
            :key="spuAttr.id"
          >
            <el-select
              v-model="spuAttr.spuIdValueId"
              :placeholder="`请选择${spuAttr.saleAttrName}`"
            >
              <el-option
                v-for="attr in spuAttr.spuSaleAttrValueList"
                :key="attr.id"
                :label="attr.saleAttrValueName"
                :value="`${spuAttr.id}:${attr.id}`"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table
          ref="multipleTableRef"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="Date" width="120">
            <template #default="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column property="name" label="Name" width="120" />
          <el-table-column property="address" label="Address" show-overflow-tooltip />
        </el-table>
        <div class="my-btn">
          <el-button type="primary">保存</el-button>
          <el-button @click="cancelAddSku">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { reqSpuDetail, reqSpuImageList } from '@/api/spu'
import type { AttrData, ISkuCommon, ISpuListItem, spuImage } from '@/api/types'
import { onMounted, ref } from 'vue'
import { useCategoryStore } from '@/stores/category'
import { storeToRefs } from 'pinia'
import { reqAttrList } from '@/api/attrs'

const props = defineProps<{
  showId?: number | string
}>()
const { category1Id, category2Id, category3Id } = storeToRefs(useCategoryStore())

const skuItem = ref<ISkuCommon>({
  price: 0,
  skuName: '',
  skuDesc: '',
  weight: '',
  spuId: '',
  tmId: '',
  category3Id: category3Id.value as number,
  skuDefaultImg: '',
  skuSaleAttrValueList: [],
  skuAttrValueList: [],
  skuImageList: []
})
const spuImgList = ref<spuImage[]>([])
const spuInfo = ref<ISpuListItem>({
  category3Id: category3Id.value as number,
  description: '',
  spuImageList: [],
  spuName: '',
  spuSaleAttrList: [],
  tmId: 0
})
const skuAttrList = ref<AttrData[]>([])
const getData = async () => {
  const showId = props.showId as number
  const [spuDetail, spuImg, attrList] = await Promise.all([
    reqSpuDetail(showId),
    reqSpuImageList(showId),
    reqAttrList(
      category1Id.value as string,
      category2Id.value as string,
      category3Id.value as string
    )
  ])
  if (spuDetail.code === 200 && spuImg.code === 200 && attrList.code === 200) {
    spuInfo.value = spuDetail.data
    spuImgList.value = spuImg.data
    skuAttrList.value = attrList.data
  }
}

onMounted(() => {
  getData()
})

const emit = defineEmits<{
  (e: 'showForm', value: number): void
}>()

// 取消添加 sku
const cancelAddSku = () => {
  emit('showForm', 1)
}

const handleSelectionChange = () => {
  // todo
}
</script>
<script lang="ts">
export default {
  name: 'SkuForm'
}
</script>

<style scoped lang="scss">
.my-btn,
.el-card {
  margin-top: 16px;
}
</style>
